@import 'config';
.tabs{
  &>.hd{
    position: relative;
    height: px2rem(39px);
    border: px2rem(1px) solid darken($light, 3%);
    background-color: $white;
    ul{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    li{
      font-size: px2rem(12px);
      line-height: px2rem(39px);
      text-align: center;
      color: $darker;
      &.active{
        color: $primary;
      }
    }
    .modify{
      content:'';
      position: absolute;
      bottom: px2rem(-2px);
      left: px2rem(10px);
      width: px2rem(28px);
      height: px2rem(3px);
      background-color:$primary;
      transition: 0.3s;
    }
  }
  &>.bd{
    position: relative;
    overflow: hidden;
  }
}

.order-tabs{
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light;
  &>.hd{
    padding: 0 px2rem(10px);
  }
  &>.bd{
    flex: 1;
  }
}
.tabs-item{
 height: 100%;
 min-height:px2rem(320px);
 position: relative;
}
.order-list{
  padding-top: px2rem(10px); 
  &>.item{
    border: px2rem(1px) solid darken($light, 5%);
    border-width: px2rem(1px) 0;
    margin-bottom: px2rem(10px);
    // margin-top: px2rem(10px);
    background-color: $white;
    font-size: px2rem(12px);
    &>.hd,&>.bd,&>.ft{
      display: flex;
      align-items: center;
    }
    .left{
      flex: 1;
    }
    &>.hd{
      padding: px2rem(5px) px2rem(10px);
      // margin: 0 px2rem(10px);
      height: px2rem(24px);
      border-bottom: px2rem(1px) solid darken($light, 5%);
      color: $darker;
    }
    &>.bd{
      border-width: px2rem(1px) 0;
      padding: px2rem(10px);
      .right{
        padding-left: px2rem(10px);
        // width: px2rem(60px); 
        // align-items: center;
        align-items: stretch;
        // align-self: stretch;
        // justify-content: center;
        // align-content: center;
      },
      .left{
        border-right: px2rem(1px) solid $light;
      }
      .order_status{
        flex: 1;
        display: block;
        color: $primary;
        text-align: center;
      }
    }
    &>.ft{
      padding: px2rem(10px);
      height: px2rem(24px);
      border-top: px2rem(1px) solid darken($light, 5%);
      .price{
        color: $red;
        font-size: px2rem(13px);
      }
    }
    .btn{
      height: px2rem(16px);
      line-height: px2rem(16px);
      padding: px2rem(4px) px2rem(12px);
      font-size: px2rem(12px);
      border-radius: px2rem(12px);
      background-color: $light;
    }
    .btn-red{
      color: $white;
      background-color: $red;
    }
    .btn-green{
      color: $white;
      background-color: $green;
    }
  }
}
.product-list{
  // flex: 1;
  // display: flex;
  // flex-wrap: wrap;
  &>.item{
    // flex: 1;
    display: flex;
    position: relative;
    // width: px2rem(48px);
    // margin-right: px2rem(10px);
    margin-bottom: px2rem(10px);
    &:last-child{
      margin-bottom: 0;
    }
    .thumb{
      width: px2rem(48px);
      height: px2rem(48px);
      margin-bottom: px2rem(5px);
      margin-right: px2rem(5px);
      border: px2rem(1px) solid $light;
      overflow: hidden;
      img{
        width: 100%;
      }
    }
    .gift{
    }
    .title {
      color: $black;
      height: px2rem(20px);
      line-height: px2rem(20px);
      overflow: hidden;
    }
    .number{
      color: $red;
    }
    .delivery_time{
      color: $dark;
    }
  }
}




